// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好
const staticOption = {
  title: {
    text: ''
  },
  color: ['#1890ff', '#00e2fe', '#ffe666', '#8le6b3', '#11c9aa', '#4c6aff', '#7e73ff', '#a694ff'],
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  xAxis: {
    type: 'category',
    data: ['', '', ''],
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#bbb',
        fontSize: 18
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: true
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#bbb',
        fontSize: 18
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    }
  },
  label: {
    show: true,
    // 标签的文字。
    formatter: function (param) {
      return param['name']
    }
  },
  series: [
    {
      type: 'sankey',
      layout: 'none',
      left: '5%',
      right: '5%',
      nodeGap: 16, // 设置每个矩形节点之间的间距
      height: '90%', // 设置桑基图的高度
      width: '70%',
      layoutIterations: 1,
      top: '5%',
      bottom: '5%',
      draggable: false,
      itemStyle: {
        borderWidth: 0
      },
      data: [],
      lineStyle: {
        color: 'source',
        opacity: 0.4,
        width: 2
      },
      emphasis: {
        lineStyle: {
          opacity: 0.6
        }
      },
      links: [],
      label: {
        normal: {
          show: true,
          position: 'right',
          color: '#fff',
          fontSize: 14,
          formatter: function (params) {
            if (['用户中心', '教师', '家长', '学生'].includes(params.name)) {
              return `${params.name}\n${params.value.toLocaleString()}`
            } else if (params.value > 420000) {
              return `${params.name}\n${params.value.toLocaleString()}`
            } else if (params.value < 200) {
              return ''
            } else {
              return `${params.name}`
            }
            // if (params.value < 420000 && params.name !== '教师') {
            //   return `${params.name}`
            // } else {
            //   return `${params.name}\n${params.value.toLocaleString()}`
            // }
          }
        }
      }
    }
  ]
}

const staticOptionHuge = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  xAxis: {
    type: 'category',
    data: ['', '', ''],
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#bbb',
        fontSize: 32
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: true
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#bbb',
        fontSize: 32
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    }
  },
  label: {
    show: true,
    // 标签的文字。
    formatter: function (param) {
      return param['name']
    }
  },
  series: [
    {
      type: 'sankey',
      layout: 'none',
      left: 0,
      right: 140,
      top: '12%',
      bottom: 0,
      itemStyle: {
        borderWidth: 0
      },
      data: [],
      lineStyle: {
        color: 'source',
        opacity: 0.4
      },
      emphasis: {
        lineStyle: {
          opacity: 0.6
        }
      },
      links: [],
      label: {
        normal: {
          show: true,
          position: 'right',
          color: '#fff',
          fontSize: 32,
          formatter: function (params) {
            return `${params.name}\n${params.value.toLocaleString()}`
          }
        }
      }
    }
  ]
}

const staticOptionMid = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  xAxis: {
    type: 'category',
    data: ['', '', ''],
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#bbb',
        fontSize: 14
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: true
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#bbb',
        fontSize: 14
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    }
  },
  label: {
    show: true,
    // 标签的文字。
    formatter: function (param) {
      return param['name']
    }
  },
  series: [
    {
      type: 'sankey',
      layout: 'none',
      left: '5%',
      right: 140,
      top: '18%',
      bottom: '18%',
      itemStyle: {
        borderWidth: 0
      },
      data: [],
      lineStyle: {
        color: 'source',
        opacity: 0.4
      },
      emphasis: {
        lineStyle: {
          opacity: 0.6
        }
      },
      links: [],
      label: {
        normal: {
          show: true,
          position: 'right',
          color: '#fff',
          fontSize: 14
        }
      }
    }
  ]
}

// 备选颜色，有需求则进行循环
const colors = ['#834bf6', '#ffdd89', '#5996ff', '#00f2c3',
  '#ee7eb2', '#9ee2bd', '#2ac2e2', '#0069df', '#0099ff', '#7574ee', '#e5beeb', '#ffdd89']
let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    if (screen > 3656) {
      this.option = staticOptionHuge
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    colorIndex = 0
    // 装配数据 必须使用箭头函数
    additionalOptions.sources.forEach((p1) => {
      this.option.series[0].data.push({
        name: p1.name,
        value: p1.value,
        itemStyle: {
          color: colors[colorIndex],
          opacity: 0.8
        }
      })
      colorIndex += 1
      if (colorIndex > colors.length) {
        colorIndex = 0
      }
    })
    additionalOptions.links.forEach((p1) => {
      this.option.series[0].links.push(p1)
    })
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.series[0].data = []
    this.option.series[0].links = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
